<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>记事本</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
    <p>记事本</p>
    <div class="box">
        <!-- 文本框 -->
        <input v-model="inputValue" type="text" placeholder="请输入任务" autofocus="autofocus" @keyup.enter="add">
        <!-- 记事本区 -->
        <section class="main">
            <ol>
                <li class="todo" v-for="(item,index) in list">{{index+1}}. &nbsp; {{item}} <span class="del" @click="del(index)" >×</span></li>

            </ol>
        </section>
        <!-- 底部栏 -->
        <footer class="footer">
            <span class="info" v-if="list.length!=0">items left</span>
            <span class="clear" v-if="list.length!=0">Clear</span>
        </footer>
    </div>
</body>
<script>
    var app = new Vue({
        el: ".box",
        data: {
            list:["写代码","吃饭饭","睡觉觉"],
            inputValue:"好好学习，天天向上"
        },
        methods: {
            add:function(){
                this.list.push(this.inputValue);
            },
            del:function(index){
                this.list.splice(index,1);
            }
        }
    })
</script>
</html>